 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>

	
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<link rel="shortcut icon" type="image/ico" href="http://www.sprymedia.co.uk/media/images/favicon.ico">
		
		<title>Using DataTable with Editable plugin - Getting the data source via ajax request</title>
		<style type="text/css" title="currentStyle">
			@import "media/css/demo_page.css";
			@import "media/css/demo_table.css";
			@import "media/css/demo_validation.css";
			@import "media/css/themes/base/jquery-ui.css";
			@import "media/css/themes/smoothness/jquery-ui-1.7.2.custom.css";
		</style>

        <script src="media/js/jquery-1.4.4.min.js" type="text/javascript"></script>
        <script src="media/js/jquery.dataTables.min.js" type="text/javascript"></script>
        <script src="media/js/jquery.jeditable.js" type="text/javascript"></script>
        <script src="media/js/jquery-ui.js" type="text/javascript"></script>
        <script src="media/js/jquery.validate.js" type="text/javascript"></script>
        <script src="media/js/jquery.dataTables.editable.js" type="text/javascript"></script>






<script type="text/javascript" charset="utf-8">
			$(document).ready( function () {


				

				$('#example2').dataTable( {
					
					"sScrollY": "200px",
					"bScrollCollapse": true,
					"bPaginate": false,
					"bJQueryUI": true,
					"aoColumns": [
							{ "bSortable": false },
							null,
							null,
							{ "sClass": "center" }
					]
				}).makeEditable({
									sUpdateURL: "UpdateData.php",
                    							sAddURL: "AddData.php",
									sAddHttpMethod: "GET", //Used only on google.code live example because google.code server do not support POST request
                    							sDeleteURL: "DeleteData.php",

                    							sAddNewRowFormId: "formAddNewRow2",
                    							sAddNewRowButtonId: "btnAddNewRow2",
                    							sAddNewRowOkButtonId: "btnAddNewRowOk2",
                    							sAddNewRowCancelButtonId: "btnAddNewRowCancel2",
                    							sDeleteRowButtonId: "btnDeleteRow2"
										});
                              
                              
                              
				$('#example1').dataTable( {
					
					"sScrollY": "200px",
					"bScrollCollapse": true,
					"bPaginate": false,
					"bJQueryUI": true,
					"aoColumns": [
							{ "bSortable": false },
							null,
							null,
							null,
							{ "sClass": "center" }
					]
				}).makeEditable({
									sUpdateURL: "UpdateData.php",
                    							sAddURL: "AddData.php",
									sAddHttpMethod: "GET", //Used only on google.code live example because google.code server do not support POST request
                    							sDeleteURL: "DeleteData.php"
										});
			} );

				
		</script>




<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-17838786-2']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
	</head>




<body id="dt_example">
		<div id="container">
			<div class="full_width big">

				Editable DataTable example for issue 19
			</div>
			
			<h1>Preamble</h1>
			<p>
</p>


	
		
			
			<h1>Live example</h1>

			<div id="demo">

<form id="formAddNewRow" action="#" title="Add New Browser With CSS Grade">
        <label for="engine">Rendering engine </label> Trident<br />
	<input type="hidden" name="engine" id="name" value="Trident" class="required" rel="0" />
        <br />
        <label for="browser">Browser</label><br />
	<input type="text" name="browser" id="browser" rel="1" />
        <br />
        <label for="platforms">Platform(s)</label><br />
	<textarea name="platforms" id="platforms" rel="2"></textarea>
        <br />
        <label for="version">Engine version</label><br />
	<select name="version" id="version" rel="3">
                <option>1.5</option>
                <option>1.7</option>
                <option>1.8</option>
        </select>
        <br />
        <label for="grade">CSS grade</label><br />
		<input type="radio" name="grade" value="A" rel="4"> First<br>
		<input type="radio" name="grade" value="B" rel="4"> Second<br>
		<input type="radio" name="grade" value="C" checked rel="4"> Third
        <br />
</form>



<form id="formAddNewRow2" action="#" title="Add New Browser Without CSS Grade">
        <label for="engine">Rendering engine </label> Trident<br />
	<input type="hidden" name="engine" id="name" value="Trident" class="required" rel="0" />
        <br />
        <label for="browser">Browser</label><br />
	<input type="text" name="browser" id="browser" rel="1" />
        <br />
        <label for="platforms">Platform(s)</label><br />
	<textarea name="platforms" id="platforms" rel="2"></textarea>
        <br />
        <label for="version">Engine version</label><br />
	<select name="version" id="version" rel="3">
                <option>1.5</option>
                <option>1.7</option>
                <option>1.8</option>
        </select>
        <br />
</form>

           <hr />
           
           

<hr/>
<button id="btnDeleteRow2">Delete Selected Browser Without CSS Grade</button> <button id="btnAddNewRow2">Add New Browser Without CSS Grade</button>

<table cellpadding="0" cellspacing="0" border="0" class="display" id="example2">
	<thead>
		<tr>
			<th>Rendering engine</th>
			<th>Browser</th>
			<th>Platform(s)</th>
			<th>Engine version</th>
		</tr>
	</thead>
	<tbody>
		<tr id="1" class="odd gradeX">
			<td>Trident</td>

			<td>Internet
				 Explorer 4.0</td>
			<td>Win 95+</td>
			<td class="center">4</td>

		</tr>
		<tr id="2" class="odd gradeC">
			<td>Trident</td>

			<td>Internet
				 Explorer 5.0</td>
			<td>Win 95+</td>
			<td class="center">4</td>

		</tr>
		<tr id="3" class="odd gradeA">
			<td>Trident</td>

			<td>Internet
				 Explorer 5.5</td>
			<td>Win 95+</td>
			<td class="center">5.5</td>

		</tr>
		<tr id="4" class="odd gradeA">
			<td>Trident</td>

			<td>Internet
				 Explorer 6</td>
			<td>Win 98+</td>
			<td class="center">6</td>
			
		</tr>
		<tr id="5" class="odd gradeA">
			<td>Trident</td>

			<td>Internet Explorer 7</td>
			<td>Win XP SP2+</td>
			<td class="center">7</td>

		</tr>
		<tr id="6" class="odd gradeA">
			<td>Trident</td>

			<td>AOL browser (AOL desktop)</td>
			<td>Win XP</td>
			<td class="center">6</td>

		</tr>
	</tbody>
</table>


<hr/>

<button id="btnDeleteRow">Delete Selected Browser With CSS Grade</button> <button id="btnAddNewRow">Add Browser With CSS Grade</button>

<table cellpadding="0" cellspacing="0" border="0" class="display" id="example1">
	<thead>
		<tr>
			<th>Rendering engine</th>
			<th>Browser</th>
			<th>Platform(s)</th>
			<th>Engine version</th>
			<th>CSS grade</th>
		</tr>
	</thead>
	<tfoot>
		<tr>

			<th>Rendering engine</th>
			<th>Browser</th>
			<th>Platform(s)</th>
			<th>Engine version</th>
			<th>CSS grade</th>
		</tr>

	</tfoot>
	<tbody>
		<tr id="1" class="odd gradeX">
			<td>Trident</td>

			<td>Internet
				 Explorer 4.0</td>
			<td>Win 95+</td>
			<td class="center">4</td>
			<td class="center">X</td>
		</tr>
		<tr id="2" class="odd gradeC">
			<td>Trident</td>

			<td>Internet
				 Explorer 5.0</td>
			<td>Win 95+</td>
			<td class="center">5</td>
			<td class="center">C</td>
		</tr>
		<tr id="3" class="odd gradeA">
			<td>Trident</td>

			<td>Internet
				 Explorer 5.5</td>
			<td>Win 95+</td>
			<td class="center">5.5</td>
			<td class="center">A</td>
		</tr>
		<tr id="4" class="odd gradeA">
			<td>Trident</td>

			<td>Internet
				 Explorer 6</td>
			<td>Win 98+</td>
			<td class="center">6</td>
			<td class="center">A</td>
		</tr>
		<tr id="5" class="odd gradeA">
			<td>Trident</td>

			<td>Internet Explorer 7</td>
			<td>Win XP SP2+</td>
			<td class="center">7</td>
			<td class="center">A</td>
		</tr>
		<tr id="6" class="odd gradeA">
			<td>Trident</td>

			<td>AOL browser (AOL desktop)</td>
			<td>Win XP</td>
			<td class="center">6</td>
			<td class="center">A</td>
		</tr>
	</tbody>
</table>

<hr/>



			</div>
			<div class="spacer"></div>

			<h1>Other examples</h1>
			<ul>
				<li><a href="index.html">Basic usage</a></li>
				<li><a href="addingrecords.html">Adding a new record</a></li>
				<li><a href="custom-editors.html">Custom editors</a></li>
				<li><a href="inline-validation.html">Validation of inline cells</a></li>
				<li><a href="events.html">Pre-processing and post-processing events</a></li>
				<li><a href="customization.html">User interface customizations</a></li>
				<li><a href="custom-messages.html">Customization of message dialogs</a></li>
            <li><a href="server_side_processing.html">Sever side processing</a></li>
			</ul>
			
			<div id="footer" style="text-align:center;">
				<span style="font-size:10px;">
					DataTables Editable &copy; Jovan Popovic 2010-2011.<br>
				</span>
			</div>
		</div>
 </body>


</html>
